<template>
  <div class="hello">
	  <div class="talk_window" id="talk_window">
	  	<div class="windows_top">
	  		<div class="windows_top_box">
	  			<span>早安无恙</span>
	  			<ul class="window_icon">
	  				<li><a href=""><img src="../assets/images/icon/icon7.png"/></a></li>
	  				<li><a href="#"><img src="../assets/images/icon/icon8.png"/></a></li>
	  				<li @click="is_max = !is_max"><a href="#" ><img src="../assets/images/icon/icon9.png"/></a></li>
	  				<li><a href="#"><img src="../assets/images/icon/icon10.png"/></a></li>
	  			</ul>
	  			<!-- <div class="extend" class="am-btn am-btn-success" data-am-offcanvas="{target: '#doc-oc-demo3'}"></div>
	  			 --><!-- 侧边栏内容 -->
	  			<div id="doc-oc-demo3" class="am-offcanvas">
	  				<div class="am-offcanvas-bar am-offcanvas-bar-flip">
	  					<div class="am-offcanvas-content">
	  						<p><a href="http://music.163.com/#/song?id=385554" target="_blank">网易音乐</a></p>
	  					</div>
	  				</div>
	  			</div>
	  		</div>
	  	</div>
	  	
	  	<!--聊天内容-->
	  	<div class="windows_body">
	  		<div class="blank">
	  			<div class="office_text">
	  				<transition name="fade">
	  				<ul class="content" >
						<vue-scroll @handle-resize="handleResize" ref="vs"> 
							<li v-for="(item,index) in message_list" :key="index" v-bind:class="item.owner ==1 ? 'me' : 'other' " >
								<img :src="item.avatar" title="金少凯"><span>{{item.user_message}}</span>
							</li>
						</vue-scroll>
	  				</ul>
	  				</transition>
	  			</div>
	  		</div>
	  	</div>
	  	
	  	<div class="windows_input" id="talkbox">
	  		<div class="input_icon">
	  			<a href="javascript:;"></a>
	  			<a href="javascript:;"></a>
	  			<a href="javascript:;"></a>
	  			<a href="javascript:;"></a>
	  			<a href="javascript:;"></a>
	  			<a href="javascript:;"></a>
	  		</div>
	  		<div class="input_box">
	  			<textarea name="" rows="" cols="" id="input_box"></textarea>
	  			<button id="send">发送（S）</button>
	  		</div>
	  	</div>
	  </div>
  </div>
</template>

<script>
export default {
  name: 'TalkWindow',
  props:{
	  
  },
  watch:{
	is_max:function(val){
		this.$emit('talk_event',val)
	}  
  },
  data () {
    return {
	 ops: {
	   vuescroll: {},
	   scrollPanel: {},
	   rail: {},
	   bar: {}     
	 },	
     is_max:false,		
     message_list:[
     			  {
                 'owner':1,
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },
     			  {
                 'owner':0,   
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },
     			  {
     			      'owner':1,
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },
     			  {
     			      'owner':0,   
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },{
                 'owner':1,
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },
     			  {
                 'owner':0,   
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },
     			  {
     			      'owner':1,
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },
     			  {
     			      'owner':0,   
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },{
                 'owner':1,
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },
     			  {
                 'owner':0,   
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },
     			  {
     			      'owner':1,
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },
     			  {
     			      'owner':0,   
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },
     			  {
     			      'owner':1,
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },
     			  {
     			      'owner':0,   
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },{
                 'owner':1,
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },
     			  {
                 'owner':0,   
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },
     			  {
     			      'owner':1,
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },
     			  {
     			      'owner':0,   
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },{
                 'owner':1,
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },
     			  {
                 'owner':0,   
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },
     			  {
     			      'owner':1,
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },
     			  {
     			      'owner':0,   
     				  'avatar':require('../assets/images/head/2.jpg'),
     				  'user_name':'张三',
     				  'user_message':'勇夫安知义，智者必怀仁',
     				  'user_time':'下午 2：54',
     			  },
     		  ],
     
    }
  },
  methods:{
	  handleResize:function(){
		  
	  }
  }
}
</script>
<style scoped>


</style>